<template>
    <div>
        <el-form ref="forgetPassSetForm" :model="forgetPassSetFormData" :rules="rules" :label-width="formLabelWidth">
            <el-form-item label="账号" :error="joinToString(forgetPassSetFormErrors.account||'')"
                          prop="account">
                <el-input v-model="forgetPassSetFormData.account" autofocus></el-input>
            </el-form-item>
            <el-form-item label="验证码"
                          :error="joinToString(forgetPassSetFormErrors.code_val||'')"
                          prop="code_val">
                <el-input v-model="forgetPassSetFormData.code_val" autocomplete="off">
                    <template slot="append">
                        <el-button @click="openSendDialog()" v-text="sendButton.content||'发送验证码'" :disabled="sendButton.disabled||false"></el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="密码"
                          :error="joinToString(forgetPassSetFormErrors.password||'')"
                          prop="password">
                <el-input type="password" v-model="forgetPassSetFormData.password"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="重复密码"
                :error="joinToString(forgetPassSetFormErrors.password_confirm||'')"
                prop="password_confirm">
                <el-input type="password" v-model="forgetPassSetFormData.password_confirm"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-button type="primary" class="btn-block" @click="forgetPassSet()">重置</el-button>
        </el-form>
        <el-dialog
            ref="forgetPassSendDialog"
            title="忘记密码"
            :visible.sync="dialogVisibleSend"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            append-to-body
            center>
            <div>
                <el-form ref="forgetPassSendForm" :model="forgetPassSendFormData" :rules="rules" :label-width="formLabelWidth">
                    <el-form-item label="发送方式" >
                        <el-radio-group v-model="forgetPassSendFormData.send_type" >
                            <el-radio border  v-if="allowMobileResetPass" value="mobile" label="mobile">发给手机号</el-radio>
                            <el-radio border  v-if="allowEmailResetPass" value="email" label="email">发给邮箱</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="验证" :error="joinToString(forgetPassSendFormErrors.code_img_val||'')"
                                  prop="code_img_val">
                        <input-captcha-image
                            v-on:change="(code_id,code_val)=>{forgetPassSendFormData.code_img_id=code_id;forgetPassSendFormData.code_img_val=code_val;}"></input-captcha-image>
                    </el-form-item>
                    <el-button type="primary" class="btn-block" @click="forgetPassSend()">发送</el-button>
                </el-form>
            </div>

        </el-dialog>

    </div>


</template>

<script>

    import ApiAuth from "../services/api-auth";

    export default {
        components: {
        },
        props: {
            formLabelWidth: {
                type: String,
                default: '120px'
            },
            authGuard: {
                type: String,
                default: 'api'
            },
            dataGuardConfig:{
                type: Object,
                default: function () {
                    return {}
                }
            },
        },

        data() {
            var validatePasswordConfirm = (rule, value, callback) => {
                if (value !== this.forgetPassSetFormData.password) {
                    callback(new Error('两次密码输入不一致'));
                }
                callback();
            };
            return {
                guardConfig:{},
                dialogVisibleSend:false,
                sendButton:{
                    content:'发送验证码',
                    disabled:false
                },
                forgetPassSendFormData: {
                    account: '',
                  code_img_id: '',
                  code_img_val: '',

                },
                forgetPassSendFormErrors: {
                    account: '',
                    code_val: '',

                },
                forgetPassSetFormData: {
                    account: '',
                    user_id: '',
                    code_val: '',
                    password: '',
                    reset_password_confirm: '',

                },
                forgetPassSetFormErrors: {
                    account: '',
                    user_id: '',
                    code_val: '',
                    password: '',
                    password_confirm: '',
                },


                rules: {
                    account: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {validator: LeValidator.validatePasswordStrong, trigger: 'blur'}
                    ],
                    password_confirm: [
                        {required: true, message: '请重复密码', trigger: 'blur'},
                        {validator: validatePasswordConfirm, trigger: 'blur'}
                    ],

                }
            }
        },
        computed: {
            allowMobileResetPass: function () {
                return  LeUtils.valueGet(this.guardConfig, 'allow_mobile_reset_pass', false)
                    && LeUtils.valueGet(window, 'LeServiceCaptchaRegistered', false)
            },
            allowEmailResetPass: function () {
                return LeUtils.valueGet(this.guardConfig, 'allow_email_reset_pass', false)
                && LeUtils.valueGet(window, 'LeServiceCaptchaRegistered', false)
            }
        },
        async created() {
            let _this = this;
            if(!LeUtils.isEmpty(_this.dataGuardConfig)){
                _this.guardConfig = _this.dataGuardConfig;
            }else{
                await ApiAuth.loadConfig(_this.authGuard).then(function (data) {
                  _this.guardConfig = data;
                })
            }

        },
        destroyed(){

        },
        mounted() {
            let _this = this

        },
        methods: {
            joinToString: function (obj, glue) {
                return LeUtils.joinToString(obj, glue)
            },
            openSendDialog:function(){
                if(!LeUtils.valueGet(this.forgetPassSetFormData,'account',false)){
                    this.$message.error('账号不能为空')
                    this.dialogVisibleSend = false;
                    return false
                }
                this.dialogVisibleSend = true;
            },

            forgetPassSend: function () {
                let _this = this;
                _this.forgetPassSendFormData.account = _this.forgetPassSetFormData.account
                _this.forgetPassSendFormData.guard = _this.authGuard

                LeRoute.request('api.l-e-s.auth.reset_password.send', _this.forgetPassSendFormData)
                    .then(function (res_data) {
                        _this.$message.success(LeUtils.valueGet(res_data, 'message', '发送成功'));
                        _this.$refs['forgetPassSendForm'].resetFields();
                        _this.forgetPassSetFormData.send_type = LeUtils.valueGet(_this.forgetPassSendFormData, 'send_type', '')
                        _this.forgetPassSetFormData.account = LeUtils.valueGet(res_data, 'data.account', '')
                        _this.forgetPassSetFormData.user_id = LeUtils.valueGet(res_data, 'data.id', '')
                        _this.dialogVisibleSend = false;

                        _this.sendButton.disabled = true;
                        _this.sendButton.content = '';
                        LeUtils.timeCountDown(60,function () {
                            _this.sendButton.disabled = false;
                            _this.sendButton.content = '发送验证码';
                        },function (timeout) {
                            _this.sendButton.content = timeout + '秒后重新发送';
                        })

                    }).catch(function (error) {
                    _this.forgetPassSendFormErrors = LeUtils.valueGet(error, 'response.data.errors',{});
                })


            },
            forgetPassSet: function () {
                let _this = this;
                this.$refs['forgetPassSetForm'].validate((valid) => {
                    if (valid) {
                        //console.log(this.forgetPassSendFormData);
                        _this.forgetPassSetFormData.guard = _this.authGuard
                        LeRoute.request('api.l-e-s.auth.reset_password.set', _this.forgetPassSetFormData)
                            .then(function (res_data) {
                                _this.$message.success(LeUtils.valueGet(res_data, 'message', '重置成功'));
                                _this.$refs['forgetPassSetForm'].resetFields();
                                _this.$emit('reseted');

                            }).catch(function (error) {
                            _this.forgetPassSetFormErrors = LeUtils.valueGet(error, 'response.data.errors',{});
                        })
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });


            },

        }
    }
</script>
